<template>
  <div>
    <div>
      <el-form :model="queryOrderCarmi" class="queryOrderCarmi" :loading="buttonLoading">
        <el-row :gutter="24">
          <el-col :span="7">
            <el-form-item label="卡密 " label-width="60px" prop="filterInfo">
              <el-input v-model="queryOrderCarmi.filterInfo" placeholder="请输入卡密 " clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="特殊卡密 " label-width="70px" prop="gainPrizeStatus">
              <el-select v-model="queryOrderCarmi.gainPrizeStatus" placeholder="请选择特殊卡密" clearable>
                <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="球队" label-width="40px" prop="gainPrizeStatus">
              <el-select v-model="queryOrderCarmi.isTeamFlag" placeholder="请选择球队" clearable>
                <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="中卡 " label-width="70px" prop="gainCardStatus">
              <el-select v-model="queryOrderCarmi.gainCardStatus" placeholder="请选择状态" clearable>
                <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQueryCarmiList">搜索</el-button>
              <el-button icon="Refresh"  @click="resetQueryCarmiList">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="sourceDataCarmiList" class="cardOrdersDetailVoList" border max-height="800px" v-loadmore="handleScroll">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="carmiInfo" label="卡密" />
      <el-table-column prop="gainCardStatus" label="中卡" width="100" align="center">
        <template #default = "scope">
          <dict-tag :options="sys_yes_no" :value="scope.row.gainCardStatus" />
        </template>
      </el-table-column>
      <el-table-column prop="gainPrizeStatus" label="特殊卡密" width="100" align="center">
        <template v-slot:default="scope">
          <dict-tag :options="sys_yes_no" :value="scope.row.gainPrizeStatus" />
        </template>
      </el-table-column>
      <el-table-column prop="isTeamFlag" label="球队" width="100" align="center">
        <template v-slot:default="scope">
          <dict-tag v-if ="scope.row.isTeamFlag != null && scope.row.isTeamFlag != '' " :options="sys_yes_no" :value="scope.row.isTeamFlag" />
          <el-tag v-else type="warning">福盒</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="正面" prop="frontImagePath" width="120" align="center">
        <template v-slot:default="scope">
          <div v-if="scope.row.frontImagePath != null">
            <image-preview :src="scope.row.frontImagePath"></image-preview>
          </div>
          <div>
            <el-tag v-if="scope.row.frontImagePath == null" type="warning">无</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="背面" prop="reverseImagePath" width="120" align="center">
        <template v-slot:default="scope">
          <div v-if="scope.row.reverseImagePath != null">
            <image-preview :src="scope.row.reverseImagePath"></image-preview>
          </div>
          <div>
            <el-tag v-if="scope.row.reverseImagePath == null" type="warning">无</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination  v-show="total > 0" :total="total" v-model:page="queryOrderCarmi.pageNum"
                 v-model:limit="queryOrderCarmi.pageSize" @pagination="list" />
  </div>
</template>

<script lang="ts" setup>
import {getCardOrdersDetailByOrdersId, getOrder} from "@/api/system/cardOrder";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {sys_yes_no} = toRefs<any>(
  proxy?.useDict('sys_yes_no')
);
const sourceDataCarmiList = ref([]);
const total = ref();
const buttonLoading = ref(false);

const queryOrderCarmi = ref({
  filterInfo: '',
  gainCardStatus: '',
  gainPrizeStatus: '',
  isTeamFlag: '',
  cardOrderId: undefined,
  cardCollageId: undefined,
  pageNum: 1,
  pageSize: 10,
});

const props = defineProps({
  cardOrderId: {
    type: String,
    default: ''
  },
  cardCollageId: {
    type: String,
    default: ''
  }
});

const getInfo = async () => {
  queryOrderCarmi.value.pageNum = 1;
  list();
}

const handleQueryCarmiList = async () => {
  list();
}

const resetQueryCarmiList = async () => {
  queryOrderCarmi.value.pageNum = 1;
  queryOrderCarmi.value.pageSize = 10;
  queryOrderCarmi.value.gainCardStatus = '';
  queryOrderCarmi.value.gainPrizeStatus = '';
  queryOrderCarmi.value.filterInfo = '';
  list();
}

const list = async() => {
  buttonLoading.value = true;
  const res = await getCardOrdersDetailByOrdersId(queryOrderCarmi.value);
  if(res.code == 200) {
    sourceDataCarmiList.value = res.rows;
    total.value = res.total;
  } else {
    ElMessage.error(res.msg);
  }
  buttonLoading.value = false;
}

watch(
  () => props.cardOrderId,
  (val) => {

    // 在这里添加你需要执行的逻辑
    if (val) {
      queryOrderCarmi.value.cardOrderId = props.cardOrderId;
      queryOrderCarmi.value.cardCollageId = props.cardCollageId;
      getInfo();
    }
  },
  { immediate: true, deep: true } // 立即执行一次回调
);
</script>

<style lang="scss" scoped>
</style>
